<template>
  <div class="form-demo">
    <el-card class="demo-card" shadow="never">
      <template #header>
        <div class="card-header">
          <el-icon size="20" color="#2e7d32"><Document /></el-icon>
          <span>表单组件演示</span>
        </div>
      </template>
      
      <div class="demo-content">
        <!-- 动态表单构建器 -->
        <div class="demo-section">
          <h3 class="section-title">动态表单构建器</h3>
          <p class="section-desc">通过配置快速生成各种类型的表单</p>
          
          <FormBuilder
            ref="formBuilderRef"
            :fields="formFields"
            :model-value="formData"
            :rules="formRules"
            @submit="handleFormSubmit"
            @reset="handleFormReset"
          />
          
          <div class="demo-result">
            <h4>表单数据：</h4>
            <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
          </div>
        </div>
        
        <el-divider />
        
        <!-- 数据收集器 -->
        <div class="demo-section">
          <h3 class="section-title">数据收集器</h3>
          <p class="section-desc">收集、预览、编辑和导出数据</p>
          
          <DataCollector
            ref="dataCollectorRef"
            title="用户反馈收集"
            :fields="collectorFields"
            :initial-data="initialCollectorData"
            @data-change="handleDataChange"
            @data-add="handleDataAdd"
            @data-edit="handleDataEdit"
            @data-delete="handleDataDelete"
            @data-export="handleDataExport"
          />
        </div>
        
        <el-divider />
        
        <!-- 问卷调查 -->
        <div class="demo-section">
          <h3 class="section-title">问卷调查</h3>
          <p class="section-desc">支持多种题型的在线问卷</p>
          
          <Questionnaire
            ref="questionnaireRef"
            title="用户体验调查"
            description="请花几分钟时间完成以下调查，帮助我们改进产品体验。"
            :questions="questionnaireQuestions"
            :estimated-time="3"
            @submit="handleQuestionnaireSubmit"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Document, User, Message, Rating, Check } from '@element-plus/icons-vue'
import FormBuilder from '@/components/common/FormBuilder.vue'
import DataCollector from '@/components/common/DataCollector.vue'
import Questionnaire from '@/components/common/Questionnaire.vue'

// 表单构建器字段配置
const formFields = [
  {
    name: 'username',
    label: '用户名',
    type: 'input',
    required: true,
    placeholder: '请输入用户名',
    prefixIcon: 'User',
    maxlength: 20,
    showWordLimit: true
  },
  {
    name: 'email',
    label: '邮箱',
    type: 'input',
    required: true,
    placeholder: '请输入邮箱地址',
    inputType: 'email',
    prefixIcon: 'Message'
  },
  {
    name: 'role',
    label: '用户角色',
    type: 'select',
    required: true,
    placeholder: '请选择用户角色',
    options: [
      { label: '管理员', value: 'admin' },
      { label: '普通用户', value: 'user' },
      { label: '访客', value: 'guest' }
    ]
  },
  {
    name: 'department',
    label: '所属部门',
    type: 'select',
    placeholder: '请选择部门',
    options: [
      { label: '技术部', value: 'tech' },
      { label: '产品部', value: 'product' },
      { label: '运营部', value: 'operation' },
      { label: '市场部', value: 'marketing' }
    ]
  },
  {
    name: 'skills',
    label: '技能标签',
    type: 'checkbox',
    placeholder: '请选择技能',
    options: [
      { label: 'JavaScript', value: 'js' },
      { label: 'Vue.js', value: 'vue' },
      { label: 'React', value: 'react' },
      { label: 'Node.js', value: 'node' },
      { label: 'Python', value: 'python' }
    ]
  },
  {
    name: 'experience',
    label: '工作经验',
    type: 'number',
    placeholder: '请输入工作年限',
    min: 0,
    max: 50,
    step: 1
  },
  {
    name: 'salary',
    label: '期望薪资',
    type: 'slider',
    min: 5000,
    max: 50000,
    step: 1000,
    showTooltip: true
  },
  {
    name: 'rating',
    label: '满意度评分',
    type: 'rate',
    max: 5,
    showScore: true,
    showText: true
  },
  {
    name: 'description',
    label: '个人简介',
    type: 'textarea',
    placeholder: '请简要介绍自己',
    rows: 4,
    maxlength: 500,
    showWordLimit: true
  },
  {
    name: 'avatar',
    label: '头像上传',
    type: 'upload',
    uploadUrl: '/api/upload',
    accept: 'image/*',
    limit: 1,
    listType: 'picture-card'
  },
  {
    name: 'isActive',
    label: '是否启用',
    type: 'switch',
    activeText: '启用',
    inactiveText: '禁用'
  },
  {
    name: 'joinDate',
    label: '入职日期',
    type: 'date',
    placeholder: '请选择入职日期',
    valueFormat: 'YYYY-MM-DD'
  }
]

// 表单数据
const formData = reactive({
  username: '',
  email: '',
  role: '',
  department: '',
  skills: [],
  experience: 0,
  salary: 15000,
  rating: 0,
  description: '',
  avatar: [],
  isActive: true,
  joinDate: ''
})

// 表单验证规则
const formRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '用户名长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  role: [
    { required: true, message: '请选择用户角色', trigger: 'change' }
  ]
}

// 数据收集器字段配置
const collectorFields = [
  {
    name: 'name',
    label: '姓名',
    type: 'input',
    required: true,
    placeholder: '请输入姓名',
    span: 12
  },
  {
    name: 'age',
    label: '年龄',
    type: 'number',
    required: true,
    min: 1,
    max: 120,
    span: 12
  },
  {
    name: 'gender',
    label: '性别',
    type: 'radio',
    required: true,
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' },
      { label: '其他', value: 'other' }
    ],
    span: 12
  },
  {
    name: 'education',
    label: '学历',
    type: 'select',
    required: true,
    placeholder: '请选择学历',
    options: [
      { label: '高中', value: 'high_school' },
      { label: '大专', value: 'college' },
      { label: '本科', value: 'bachelor' },
      { label: '硕士', value: 'master' },
      { label: '博士', value: 'phd' }
    ],
    span: 12
  },
  {
    name: 'interests',
    label: '兴趣爱好',
    type: 'checkbox',
    options: [
      { label: '阅读', value: 'reading' },
      { label: '运动', value: 'sports' },
      { label: '音乐', value: 'music' },
      { label: '旅行', value: 'travel' },
      { label: '摄影', value: 'photography' }
    ],
    span: 24
  },
  {
    name: 'satisfaction',
    label: '满意度',
    type: 'rate',
    max: 5,
    showScore: true,
    span: 12
  },
  {
    name: 'feedback',
    label: '反馈意见',
    type: 'textarea',
    placeholder: '请输入您的反馈意见',
    rows: 4,
    span: 24
  }
]

// 初始数据
const initialCollectorData = [
  {
    id: '1',
    name: '张三',
    age: 25,
    gender: 'male',
    education: 'bachelor',
    interests: ['reading', 'sports'],
    satisfaction: 4,
    feedback: '整体体验很好，界面设计美观。',
    createdAt: '2024-01-15T10:00:00Z'
  },
  {
    id: '2',
    name: '李四',
    age: 30,
    gender: 'female',
    education: 'master',
    interests: ['music', 'travel'],
    satisfaction: 5,
    feedback: '功能完善，操作简单易用。',
    createdAt: '2024-01-16T14:30:00Z'
  }
]

// 问卷问题配置
const questionnaireQuestions = [
  {
    id: 'q1',
    title: '您使用我们的产品多长时间了？',
    type: 'single',
    required: true,
    options: [
      { label: '不到1个月', value: 'less_than_1_month' },
      { label: '1-6个月', value: '1_to_6_months' },
      { label: '6个月-1年', value: '6_months_to_1_year' },
      { label: '1年以上', value: 'more_than_1_year' }
    ]
  },
  {
    id: 'q2',
    title: '您最常使用哪些功能？（可多选）',
    type: 'multiple',
    required: true,
    options: [
      { label: '用户管理', value: 'user_management' },
      { label: '数据统计', value: 'data_statistics' },
      { label: '文件上传', value: 'file_upload' },
      { label: '报表生成', value: 'report_generation' },
      { label: '系统设置', value: 'system_settings' }
    ]
  },
  {
    id: 'q3',
    title: '您对我们的产品有什么建议？',
    type: 'text',
    required: false,
    placeholder: '请输入您的建议和意见...',
    maxLength: 500
  },
  {
    id: 'q4',
    title: '您对产品的整体满意度如何？',
    type: 'rating',
    required: true,
    maxRating: 5
  }
]

// 组件引用
const formBuilderRef = ref()
const dataCollectorRef = ref()
const questionnaireRef = ref()

// 事件处理
const handleFormSubmit = (data: Record<string, any>) => {
  console.log('表单提交:', data)
  ElMessage.success('表单提交成功！')
}

const handleFormReset = () => {
  console.log('表单重置')
  ElMessage.info('表单已重置')
}

const handleDataChange = (data: any[]) => {
  console.log('数据变化:', data)
}

const handleDataAdd = (item: any) => {
  console.log('数据添加:', item)
}

const handleDataEdit = (item: any, index: number) => {
  console.log('数据编辑:', item, index)
}

const handleDataDelete = (index: number) => {
  console.log('数据删除:', index)
}

const handleDataExport = (data: any[]) => {
  console.log('数据导出:', data)
}

const handleQuestionnaireSubmit = (answers: Record<string, any>) => {
  console.log('问卷提交:', answers)
  ElMessage.success('问卷提交成功！感谢您的参与！')
}
</script>

<style scoped>
.form-demo {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.demo-card {
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-color);
}

.demo-content {
  padding: 20px 0;
}

.demo-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.section-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 24px;
  line-height: 1.6;
}

.demo-result {
  margin-top: 24px;
  padding: 16px;
  background: var(--background-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.demo-result h4 {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--text-primary);
}

.demo-result pre {
  margin: 0;
  padding: 12px;
  background: white;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  font-size: 12px;
  line-height: 1.4;
  overflow-x: auto;
  color: var(--text-secondary);
}

.el-divider {
  margin: 40px 0;
}
</style>
